<template>
    <div>

        <img class="bg" src="../assets/img/background.png"/>
        <div class="fxcc">


            <div class="fream">
                <p class="fream-text">{{resultText}}</p>
            </div>


            <div class="fx" style="margin-top: 20px;">
                <div v-for="(item,index) in slotList" :key="index">
                    <div class="slot">
                        <div :id="item">0</div>
                    </div>
                </div>
            </div>

            <div class="fx">
                <button class="button1" @click="onStop"/>
                <button class="button2" @click="onReset"/>
            </div>

            <div class="fx buttons"  style="margin-top: 0px;">
                <van-button style="margin-left: 100px;" @click="onSetValue(true)">设置</van-button>
                <van-button style="margin-left: 100px;" @click="onResetCache">清理缓存</van-button>
            </div>
        </div>

        <van-dialog
                v-model="showSetting"
                title="设置范围"
                :before-close="onCloseSetting">

            <van-field label="最小值" v-model="min" type="number" placeholder="设置最小值"/>
            <van-field label="最大值" v-model="max" type="number" placeholder="设置最大值"/>

        </van-dialog>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                timers: [],
                results: [],
                resultText: "",
                slotList: [],
                isRun: false,
                min: 1,
                max: 99,
                showSetting: false
            };
        },
        mounted() {
            if (localStorage.getItem("results")) {
                // console.log("localStorage-results:" + localStorage.getItem("results"))
                this.results = JSON.parse(localStorage.getItem("results"));
            }

            if (this.results) {
                this.resultText = this.results.join(',');
            } else {
                this.results = [];
            }
            this.setDigit(this.max);
        },

        methods: {
            // 设置有几位数
            setDigit(max) {
                this.slotList = [];
                // console.log(max)
                let lenght = max.toString().length;
                let index = 0;
                while (index < lenght) {
                    let id = 'slot' + index.toString();
                    // console.log(id)
                    this.slotList.push(id)
                    index++;
                }

                // 刷新页面 之后执行摇动
                this.$nextTick(() => {

                });

            },
            startSlot() {
                // 初期化（空の状態に戻す）
                this.timers = []; // 老虎机的循环进程
                // 设定老虎机最初的数字
                this.isRun = true;
                for (var i = 0; i < this.slotList.length; i++) {
                    document.getElementById(this.slotList[i]).textContent = Math.floor(Math.random() * 10).toString();
                    // 转动
                    this.runSlot(i);
                }
            },
            runSlot(num) {
                // 获取指定老虎机转动槽的当前文本
                var slotValue = document.getElementById('slot' + num);

                    slotValue.textContent = Math.floor(Math.random() * 9);

                let self = this;
                // 开始下一次转动循环
                this.timers[num] = setTimeout(function () {
                    self.runSlot(num);
                }, 1000 / 30);
            },
            stopSlot(num) {
                // 停止老虎机
                clearTimeout(this.timers[num]);

            },
            onReset() {
                for (var i = 0; i < this.slotList.length; i++) {
                    clearTimeout(this.timers[i]);
                }
                // 初始化
                this.timers = [];
                // 重新开始老虎机
                this.startSlot();
            },
            onStop() {
                if (!this.isRun) {
                    return;
                }
                // 获取停止时的数字
                this.isRun = false
                this.addResult()
            },
            addResult() {


                // 范围
                let range = (this.max - this.min + 1);

                // 随机数
                let random = Math.floor((Math.random() * range)) + Math.floor(this.min);

                // 结果
                let result = random.toString();

                if (this.results.indexOf(result) >= 0) {
                    //已经包含了重来
                    this.addResult();
                    return;
                }

                // console.log("result:" + result);

                for (var i = 0; i < this.slotList.length; i++) {

                    this.stopSlot(i);
                    let text = result.substring(i, i + 1);
                    document.getElementById('slot' + i).textContent = text;
                }


                this.results.push(result);
                localStorage.setItem("results", JSON.stringify(this.results));
                this.resultText = this.results.join(',');
            },
            onResetCache() {
                localStorage.setItem("results", null);
                this.results = [];

                // 刷新页面
                location.reload()
            },
            onSetValue(result) {
                this.showSetting = result;
            },
            onCloseSetting(action, done) {

                if (this.min >= this.max) {
                    this.$toast.fail('最小值必须小于最大值')
                    done(false)
                    return
                }

                this.setDigit(this.max);
                done()
            }
        }
    };
</script>

<style scoped>
    /*.bg {*/
        /*background-image: url("../assets/img/background.png");*/
        /*height: 100vh;*/
        /*width: 100%;*/
        /*margin: 0 auto;*/
        /*background-size: cover;*/
        /*overflow: auto;*/
    /*}*/

    .bg {
        width: 100%;
        z-index: -1;
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
    }

    /*.fream {*/
        /*position: absolute; left: 50%; top: 50%;*/
        /*height: 150px;*/
        /*transform: translate(-50%, -35%);    !* 50%为自身尺寸的一半 *!*/
        /*!*margin-left: -407.5px;*!*/
        /*z-index: -1;*/
    /*}*/

    .fream{
        margin-top: 400px;
        width: 700px;
        height: 175px;
        background: url("../assets/img/fream.png") no-repeat center / contain;
    }

    .fream-text {
        /*换行 */
        word-wrap:break-word;
        z-index: 1;
        padding: 0rem 1rem;
        color: #EE4000;
        font-size: 40px;
        text-align: left;
        font-weight: bold;
        width: 650px;

    }
    .slot {
        float: left;
        width: 120px;
        font-size: 100px;
        color: white;
        font-weight: bold;
    }

    .button1 {
        border: none;
        width: 183px;
        height: 87px;
        background: url('../assets/img/button1.png') no-repeat;
    }

    .button2 {
        border: none;
        width: 183px;
        height: 87px;
        background: url('../assets/img/button2.png') no-repeat;
    }
    .buttons {
        /*隐藏调试按钮*/
        /*opacity: 0;*/
    }


</style>

